<template>
  <div>
    <el-form inline>
      <el-form-item label="姓名">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="teacherList" align="center">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="teacherName" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别">
            <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.sex==1? '男':'女' }}</span>
        </div>
      </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column  label="操作">
      <template #default="scope">
        <el-button type="primary" @click="fenpei(scope.row)">课程分配</el-button>
      </template>
    </el-table-column>


    </el-table>
    <div>
        <div style="padding: 10px 0">
      <el-pagination
      v-if="total>0"
        @size-change="search"
        @current-change="search"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    </div>
    <el-dialog title="课程分配" :visible.sync="dialogFormVisible" @close="close" width="30%">
        <el-checkbox-group v-model="checkList">
    <el-checkbox  :label="kc.id" v-for="kc of checks" :key="kc.id">{{kc.courseName}}</el-checkbox>
  </el-checkbox-group>
  <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    created(){
        this.search()
    },
  data() {
    return {
      dialogFormVisible:false,
        checkList:[],
        checks:[],

        total:0,
        pageNum: 1,
       pageSize: 10,
        name:"",
        teacherList:[],
        teacherId:0
    };
  },
  methods: {
    search() {
        this.request.get("/teacher/all",{
            params:{
                pageSize:this.pageSize,
                pageNum:this.pageNum ,
                name:this.name
                        }
        }).then(resp=>{
             this.total =  resp.data.total
             this.teacherList = resp.data.records
        })
    },
    fenpei(row){
      this.dialogFormVisible= true
      this.teacherId = row.id
        this.request.get("/teacher/course/"+row.id).then(resp=>{
            this.checks = resp.data
            resp.data.forEach(element => {
              if(element.teacherId!=null){
                this.checkList.push(element.id)   
              }
          })
             
        })
    },
    save(){
        //将已经选择的课程打包到后台
        this.request.post("/teacher/updateOrSave",{
          Course:this.checkList,
          teacherId:this.teacherId
        }).then(resp=>{
          if(resp.code==200){
            this.$message({
              message:"修改完成",
              type:"success"
            })
            this.dialogFormVisible = false
          }
        })
    },
    close(){    this.checkList = []
}
  },
};
</script>

<style>
</style>